.cq-article--s1n1 {
	--col-article: 1;
	--size-icon-cover: 30px;

	@include media-breakpoint-down(md) {
		--proportion-picture: 50%;
	}

	.cq-article {
		display: grid;
		grid-template-columns: 1fr 2fr;
		border-radius: 7px;
		box-shadow: 0 0 transparent, 0 0 transparent, 0 4px 6px 0px rgba(0, 0, 0, 10%), 0 2px 4px 0px rgba(0, 0, 0, 6%);
		background-color: var(--color-bg);
		color: var(--color-text-light);
		transition: transform 0.3s ease-in-out, box-shadow 0.3s ease, -webkit-transform 0.3s ease-in-out;

		&:hover {
			background-color: var(--color-bg);
			color: var(--color-text-light);
			transform: scale(1.01);
			box-shadow: rgba(0, 0, 0, 20%) 0 0px 20px;
		}

		@include media-breakpoint-down(md) {
			grid-template-columns: 1fr;
		}
	}

	.cq-article--cover {
		+ .cq-article--content {
			@include media-breakpoint-up(md) {
				grid-column-start: 2;
			}
			.cq-article--icon_cover {
				display: none;
			}
		}
	}

	.cq-article--icon_cover {
		position: relative;
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin-top: 5px;
		margin-right: 15px;
		text-align: center;
		border: 1px solid var(--color-icon-lightest);
		border-radius: 100%;
		background-color: var(--color-bg);
		overflow: hidden;

		> svg {
			position: absolute;
			top: 50%;
			left: 50%;
			width: var(--size-icon-cover);
			height: var(--size-icon-cover);
			transform: translate(-50%, -50%);
		}
	}

	.cq-article--cover_link {
		display: block;
		width: 100%;
	}

	.cq-article--content {
		padding: var(--space-article);
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.cq-article--title {
		color: var(--color-text);
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.cq-article--summary {
		font-size: 14px;
		line-height: 1.6;
		transition: color 0.4s ease;
		overflow: visible;
	}

	.cq-article--meta {
		@include cq-init-style-ul;
		display: flex;
		flex-wrap: wrap;
		margin-top: 15px;
		padding-top: 10px;
		border-top: 1px solid var(--color-icon-lightest);
		line-height: 1;
	}

	.cq-article--meta_pair {
		display: flex;
		align-items: center;
		margin-right: 15px;

		> a {
			@extend .cq-article--meta_pair;
			margin-right: 0;
		}

		.cq-icon {
			margin-right: 4px;
		}

		span,
		time {
			font-size: 12px;
		}
	}

	.cq-article--tag_container {
		@include cq-init-style-ul;
		display: flex;
		flex-wrap: wrap;
		margin-top: 7px;
	}

	.cq-article--tag {
		@include cq-init-style-li;
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 2px 5px;
		border: 1px solid var(--color-icon-lightest);
		background-color: var(--color-icon-lightest);
		color: #fff;
		transition: all 0.4s ease;

		&:hover {
			color: var(--color-icon-lightest);
			background-color: #fff;
		}

		a {
			display: block;
		}
		span {
			display: block;
			font-size: 12px;
		}
	}
}
